
<template>
  <div id="app">
    <my-header> {{headerTitle}}</my-header>
    <router-view>
    </router-view>
  </div>
</template>
<script>
import { computed, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import MyHeader from '@/components/Header/index.vue'
export default {
  name: 'App',
  components: {
    MyHeader
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    watch(
      () => {
        return router.currentRoute.value.name
      },
      value => {
        store.commit('setHeaderTitle', value)
      }
    )
    return {
      headerTitle: computed(() => store.state.headerTitle)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
